<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #design-container {
        width: 1920px;
        height: 1080px;
        background-color: #f0f0f0;
        position: relative;
        transform-origin: left top;
      }

      .dashboard-item {
        width: 500px;
        height: 300px;
        background-color: #3498db;
        position: absolute;
        top: 150px;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div id="design-container">
      <div class="dashboard-item"></div>
    </div>
  </body>
  <script>
    function adjustScale() {
      const designWidth = 1920;
      const designHeight = 1080;

      const container = document.getElementById("design-container");

      // 获取当前视口的尺寸
      const currentWidth = window.innerWidth;
      const currentHeight = window.innerHeight;

      // 计算缩放比例
      const scale = Math.min(
        currentWidth / designWidth,
        currentHeight / designHeight
      );

      const offsetX = (currentWidth - designWidth * scale) / (2 * scale);
      const offsetY = (currentHeight - designHeight * scale) / (2 * scale);

      // 计算居中
      // container.style.left = (currentWidth - designWidth * scale) / 2 + 'px';
      // container.style.top = (currentHeight - designHeight * scale) / 2 + 'px';

      container.style.transform = `
      scale(${scale})
      translate(${offsetX}px, ${offsetY}px)
      `;
    }
    adjustScale();
    window.addEventListener("resize", () => {
      requestAnimationFrame(() => {
        adjustScale();
      });
    });
  </script>
</html>
